<template>
    <div class="container">
        <h1>用户咨询管理</h1>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>电话</th>
                        <th>主题</th>
                        <th>内容</th>
                        <th>提交时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="message in messages" :key="message.id">
                        <td>{{ message.id }}</td>
                        <td>{{ message.name }}</td>
                        <td>{{ message.email }}</td>
                        <td>{{ message.phone }}</td>
                        <td>{{ message.subject }}</td>
                        <td class="message-content">{{ message.message }}</td>
                        <td>{{ formatDateTime(message.createdAt) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div v-if="loading" class="loading">加载中...</div>
        <div v-if="error" class="error">{{ error }}</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { api } from '@/config'; // Assuming you have a configured api utility

interface ContactMessage {
    id: number;
    name: string;
    email: string;
    phone: string;
    subject: string;
    message: string;
    createdAt: string;
}

export default defineComponent({
    name: 'ContactManage',
    setup() {
        const messages = ref<ContactMessage[]>([]);
        const loading = ref(true);
        const error = ref<string | null>(null);

        const fetchMessages = async () => {
            loading.value = true;
            error.value = null;
            try {
                // This assumes your API utility handles auth headers
                const response = await api.get('/contact');
                messages.value = response.data.sort((a: ContactMessage, b: ContactMessage) => b.id - a.id); // Show latest first
            } catch (err) {
                console.error('Failed to fetch messages:', err);
                error.value = '无法加载咨询信息。请确保您有管理员权限并已登录。';
            } finally {
                loading.value = false;
            }
        };

        const formatDateTime = (dateTimeString: string) => {
            if (!dateTimeString) return '';
            const options: Intl.DateTimeFormatOptions = {
                year: 'numeric', month: 'long', day: 'numeric',
                hour: '2-digit', minute: '2-digit', second: '2-digit'
            };
            return new Date(dateTimeString).toLocaleDateString('zh-CN', options);
        };

        onMounted(fetchMessages);

        return {
            messages,
            loading,
            error,
            formatDateTime
        };
    },
});
</script>

<style scoped>
.container {
    padding: 2rem;
}

.table-container {
    overflow-x: auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

thead th {
    background-color: #f4f6f8;
    font-weight: bold;
}

tbody tr:hover {
    background-color: #f1f1f1;
}

.message-content {
    max-width: 300px;
    white-space: pre-wrap;
    word-break: break-all;
}

.loading, .error {
    text-align: center;
    padding: 2rem;
    font-size: 1.2rem;
}

.error {
    color: #e74c3c;
}
</style> 